<template>
  <div class="template-list">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-text">
          <h1>✨ 模板案例</h1>
          <p>精选模板案例，快速启动项目 —— 让创意触手可及</p>
        </div>
        <div class="header-decoration">
          <div class="floating-shapes">
            <div class="shape shape-1"></div>
            <div class="shape shape-2"></div>
            <div class="shape shape-3"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 搜索和筛选 -->
    <div class="filter-section">
      <div class="filter-header">
        <h3>🔍 发现完美模板</h3>
        <p>使用筛选器快速找到适合您的模板</p>
      </div>
      <el-row :gutter="20" class="mb-4">
        <el-col :span="8">
          <div class="search-wrapper">
            <el-input
              v-model="searchText"
              placeholder="搜索模板名称或描述..."
              size="large"
              clearable
              @input="handleSearch"
              class="search-input"
            >
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
          </div>
        </el-col>
        <el-col :span="5">
          <el-select
            v-model="selectedCategory"
            placeholder="选择分类"
            size="large"
            clearable
            @change="handleFilter"
            class="filter-select"
          >
            <el-option
              v-for="category in categories"
              :key="category.value"
              :label="category.label"
              :value="category.value"
            />
          </el-select>
        </el-col>
        <el-col :span="5">
          <el-select
            v-model="selectedStyle"
            placeholder="选择风格"
            size="large"
            clearable
            @change="handleFilter"
            class="filter-select"
          >
            <el-option
              v-for="style in styles"
              :key="style.value"
              :label="style.label"
              :value="style.value"
            />
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" size="large" @click="$router.push('/home/template-center/create')" class="create-btn">
            <el-icon><Plus /></el-icon>
            创建专属模板
          </el-button>
        </el-col>
      </el-row>
    </div>

    <!-- 统计信息 -->
    <div class="stats-section mb-4">
      <div class="stats-header">
        <h3>📊 平台统计</h3>
      </div>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="stats-card stats-primary">
            <div class="stats-content">
              <div class="stats-number">{{ filteredTemplates.length }}</div>
              <div class="stats-label">模板总数</div>
            </div>
            <div class="stats-icon">
              <el-icon><Grid /></el-icon>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stats-card stats-success">
            <div class="stats-content">
              <div class="stats-number">{{ categories.length }}</div>
              <div class="stats-label">分类数量</div>
            </div>
            <div class="stats-icon">
              <el-icon><Collection /></el-icon>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stats-card stats-warning">
            <div class="stats-content">
              <div class="stats-number">{{ totalDownloads }}</div>
              <div class="stats-label">总下载量</div>
            </div>
            <div class="stats-icon">
              <el-icon><Download /></el-icon>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stats-card stats-info">
            <div class="stats-content">
              <div class="stats-number">{{ popularTemplates.length }}</div>
              <div class="stats-label">热门模板</div>
            </div>
            <div class="stats-icon">
              <el-icon><Star /></el-icon>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 模板列表 -->
    <div class="templates-section">
      <div class="templates-header">
        <h3>🎨 精选模板</h3>
        <div class="view-options">
          <el-button-group>
            <el-button size="small" :type="viewMode === 'grid' ? 'primary' : ''" @click="viewMode = 'grid'">
              <el-icon><Grid /></el-icon>
            </el-button>
            <el-button size="small" :type="viewMode === 'list' ? 'primary' : ''" @click="viewMode = 'list'">
              <el-icon><List /></el-icon>
            </el-button>
          </el-button-group>
        </div>
      </div>
      
      <div class="templates-grid" :class="{ 'list-view': viewMode === 'list' }">
        <div
          v-for="template in paginatedTemplates"
          :key="template.id"
          class="template-card"
          :class="`template-${template.category}`"
        >
          <div class="template-image">
            <img 
              :src="template.thumbnail" 
              :alt="template.name"
              @load="onImageLoad"
              @error="onImageError"
              loading="lazy"
            />
            <div class="template-overlay">
              <div class="overlay-actions">
                <el-button type="primary" @click="previewTemplate(template)" class="action-btn">
                  <el-icon><View /></el-icon>
                  预览
                </el-button>
                <el-button @click="useTemplate(template)" class="action-btn">
                  <el-icon><Download /></el-icon>
                  使用
                </el-button>
              </div>
            </div>
            <div class="template-badge">
              <span v-if="template.rating >= 4.8" class="badge hot">🔥 热门</span>
              <span v-else-if="template.downloads > 800" class="badge popular">⭐ 推荐</span>
              <span v-else class="badge new">✨ 最新</span>
            </div>
          </div>
          
          <div class="template-content">
            <div class="template-header">
              <h3>{{ template.name }}</h3>
              <el-tag :type="getCategoryType(template.category)" class="category-tag">
                {{ getCategoryLabel(template.category) }}
              </el-tag>
            </div>
            
            <p class="template-description">
              {{ template.description }}
            </p>
            
            <div class="template-meta">
              <el-tag size="small" effect="plain" class="meta-tag">{{ template.style }}</el-tag>
              <el-tag size="small" effect="plain" class="meta-tag">{{ template.framework }}</el-tag>
              <div class="template-stats">
                <span class="downloads">
                  <el-icon><Download /></el-icon>
                  {{ formatNumber(template.downloads) }}
                </span>
              </div>
            </div>
            
            <div class="template-actions">
              <div class="rating-section">
                <el-rate
                  v-model="template.rating"
                  disabled
                  show-score
                  text-color="#ff9900"
                  size="small"
                />
              </div>
              <el-dropdown @command="(command) => handleTemplateAction(command, template)" class="more-actions">
                <el-button size="small" text class="more-btn">
                  更多<el-icon class="el-icon--right"><ArrowDown /></el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="preview">
                      <el-icon><View /></el-icon>
                      预览
                    </el-dropdown-item>
                    <el-dropdown-item command="use">
                      <el-icon><Download /></el-icon>
                      使用
                    </el-dropdown-item>
                    <el-dropdown-item command="favorite">
                      <el-icon><Star /></el-icon>
                      收藏
                    </el-dropdown-item>
                    <el-dropdown-item command="share">
                      <el-icon><Share /></el-icon>
                      分享
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <div class="pagination-wrapper">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[12, 24, 36, 48]"
        :total="filteredTemplates.length"
        layout="total, sizes, prev, pager, next, jumper"
        background
      />
    </div>

    <!-- 预览弹窗 -->
    <el-dialog
      v-model="previewVisible"
      :title="currentTemplate?.name"
      width="90%"
      top="5vh"
      class="preview-dialog"
    >
      <div class="template-preview-content">
        <div class="preview-image">
          <img :src="currentTemplate?.thumbnail" :alt="currentTemplate?.name" />
        </div>
        <div class="preview-info">
          <div class="preview-header">
            <h3>{{ currentTemplate?.name }}</h3>
            <el-tag :type="getCategoryType(currentTemplate?.category)">
              {{ getCategoryLabel(currentTemplate?.category) }}
            </el-tag>
          </div>
          <p class="preview-description">{{ currentTemplate?.description }}</p>
          
          <div class="preview-meta">
            <div class="meta-item">
              <span class="label">框架：</span>
              <span class="value">{{ currentTemplate?.framework }}</span>
            </div>
            <div class="meta-item">
              <span class="label">风格：</span>
              <span class="value">{{ currentTemplate?.style }}</span>
            </div>
            <div class="meta-item">
              <span class="label">下载量：</span>
              <span class="value">{{ formatNumber(currentTemplate?.downloads) }}</span>
            </div>
            <div class="meta-item">
              <span class="label">评分：</span>
              <span class="value">{{ currentTemplate?.rating }}/5.0</span>
            </div>
          </div>
          
          <div class="preview-features">
            <h4>✨ 特色功能</h4>
            <ul>
              <li v-for="feature in currentTemplate?.features" :key="feature">
                <el-icon><Check /></el-icon>
                {{ feature }}
              </li>
            </ul>
          </div>
        </div>
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="previewVisible = false" size="large">取消</el-button>
          <el-button type="primary" @click="useTemplate(currentTemplate)" size="large">
            <el-icon><Download /></el-icon>
            使用此模板
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  Search, Plus, Grid, Collection, Download, Star, ArrowDown, View, List, Share, Check 
} from '@element-plus/icons-vue'

// 响应式数据
const searchText = ref('')
const selectedCategory = ref('')
const selectedStyle = ref('')
const currentPage = ref(1)
const pageSize = ref(12)
const previewVisible = ref(false)
const currentTemplate = ref(null)
const viewMode = ref('grid') // 'grid' 或 'list'

// 模板分类
const categories = ref([
  { label: '管理后台', value: 'admin' },
  { label: '电商平台', value: 'ecommerce' },
  { label: '企业官网', value: 'corporate' },
  { label: '博客系统', value: 'blog' },
  { label: '数据可视化', value: 'dashboard' },
  { label: '移动应用', value: 'mobile' },
  { label: '教育平台', value: 'education' },
  { label: '作品展示', value: 'portfolio' }
])

// 风格选项
const styles = ref([
  { label: '简约风格', value: 'minimal' },
  { label: '现代风格', value: 'modern' },
  { label: '扁平化', value: 'flat' },
  { label: '卡片式', value: 'card' },
  { label: '专业风格', value: 'professional' },
  { label: '艺术风格', value: 'artistic' }
])

// 模板数据
const templates = ref([
  {
    id: 1,
    name: 'Vue3 管理后台模板',
    description: '基于 Vue 3 + Element Plus 的现代化管理后台模板，包含完整的用户管理、权限控制、数据可视化等功能。',
    thumbnail: '',
    category: 'admin',
    style: 'modern',
    framework: 'Vue 3',
    downloads: 1200,
    rating: 4.8,
    features: [
      '响应式设计，支持多终端访问',
      '完整的权限管理系统',
      '丰富的图表组件',
      '国际化支持',
      'TypeScript 支持'
    ]
  },
  {
    id: 2,
    name: 'React 电商平台',
    description: '完整的电商解决方案，包含商品管理、订单处理、支付集成等功能，适合快速搭建电商平台。',
    thumbnail: '',
    category: 'ecommerce',
    style: 'card',
    framework: 'React',
    downloads: 890,
    rating: 4.6,
    features: [
      '商品展示与搜索',
      '购物车功能',
      '订单管理',
      '支付集成',
      '用户评价系统'
    ]
  },
  {
    id: 3,
    name: '企业官网模板',
    description: '专业的企业官网模板，包含公司介绍、产品展示、新闻资讯、联系我们等模块。',
    thumbnail: '',
    category: 'corporate',
    style: 'minimal',
    framework: 'Vue 3',
    downloads: 650,
    rating: 4.4,
    features: [
      '响应式布局',
      'SEO 友好',
      '多语言支持',
      '内容管理系统',
      '联系表单'
    ]
  },
  {
    id: 4,
    name: 'Next.js 博客系统',
    description: '基于 Next.js 的现代博客系统，支持 Markdown 编辑、标签分类、评论系统等功能。',
    thumbnail: '',
    category: 'blog',
    style: 'minimal',
    framework: 'Next.js',
    downloads: 720,
    rating: 4.7,
    features: [
      'Markdown 支持',
      '代码高亮',
      '标签系统',
      'SEO 优化',
      '评论系统'
    ]
  },
  {
    id: 5,
    name: '数据可视化仪表板',
    description: '专业的数据可视化模板，集成多种图表类型，支持实时数据更新和交互式操作。',
    thumbnail: '',
    category: 'dashboard',
    style: 'modern',
    framework: 'Vue 3',
    downloads: 980,
    rating: 4.9,
    features: [
      '多种图表类型',
      '实时数据更新',
      '交互式操作',
      '数据导出',
      '自定义主题'
    ]
  },
  {
    id: 6,
    name: '移动端 App 模板',
    description: 'React Native 移动应用模板，包含用户认证、导航、数据存储等常用功能。',
    thumbnail: '',
    category: 'mobile',
    style: 'modern',
    framework: 'React Native',
    downloads: 540,
    rating: 4.3,
    features: [
      '跨平台支持',
      '原生导航',
      '本地存储',
      '推送通知',
      '社交登录'
    ]
  },
  {
    id: 7,
    name: '在线学习平台',
    description: '完整的在线教育平台，包含课程管理、视频播放、考试系统、进度追踪等功能。',
    thumbnail: '',
    category: 'education',
    style: 'modern',
    framework: 'Vue 3',
    downloads: 623,
    rating: 4.7,
    features: [
      '课程管理',
      '视频播放器',
      '在线考试',
      '进度追踪',
      '讨论论坛'
    ]
  },
  {
    id: 8,
    name: '摄影作品集',
    description: '专业摄影师作品展示网站，支持高清图片展示、分类管理、客户画廊等功能。',
    thumbnail: '',
    category: 'portfolio',
    style: 'artistic',
    framework: 'Vue 3',
    downloads: 234,
    rating: 4.8,
    features: [
      '高清展示',
      '分类管理',
      '客户画廊',
      '水印保护',
      '在线预约'
    ]
  }
])

// 计算属性
const filteredTemplates = computed(() => {
  let result = templates.value

  if (searchText.value) {
    const search = searchText.value.toLowerCase()
    result = result.filter(template =>
      template.name.toLowerCase().includes(search) ||
      template.description.toLowerCase().includes(search)
    )
  }

  if (selectedCategory.value) {
    result = result.filter(template => template.category === selectedCategory.value)
  }

  if (selectedStyle.value) {
    result = result.filter(template => template.style === selectedStyle.value)
  }

  return result
})

const paginatedTemplates = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredTemplates.value.slice(start, end)
})

const totalDownloads = computed(() => {
  return templates.value.reduce((total, template) => total + template.downloads, 0)
})

const popularTemplates = computed(() => {
  return templates.value.filter(template => template.downloads > 800)
})

// 方法
const handleSearch = () => {
  currentPage.value = 1
}

const handleFilter = () => {
  currentPage.value = 1
}

const onImageLoad = (event) => {
  // 图片加载成功处理
  event.target.style.opacity = '1'
}

const onImageError = (event) => {
  // 图片加载失败处理 - 使用本地base64占位图片
  event.target.src = ''
}

const getCategoryType = (category) => {
  const typeMap = {
    admin: 'primary',
    ecommerce: 'success',
    corporate: 'warning',
    blog: 'info',
    dashboard: 'danger',
    mobile: 'primary',
    education: 'warning',
    portfolio: 'success'
  }
  return typeMap[category] || 'info'
}

const getCategoryLabel = (category) => {
  const labelMap = {
    admin: '管理后台',
    ecommerce: '电商平台',
    corporate: '企业官网',
    blog: '博客系统',
    dashboard: '数据可视化',
    mobile: '移动应用',
    education: '教育平台',
    portfolio: '作品展示'
  }
  return labelMap[category] || category
}

const formatNumber = (num) => {
  if (num >= 1000) {
    return (num / 1000).toFixed(1) + 'k'
  }
  return num.toString()
}

const previewTemplate = (template) => {
  currentTemplate.value = template
  previewVisible.value = true
}

const useTemplate = (template) => {
  ElMessageBox.confirm(
    `确定要使用模板 "${template.name}" 吗？这将创建一个新的项目。`,
    '确认使用模板',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'info'
    }
  ).then(() => {
    // 这里实现使用模板的逻辑
    ElMessage.success(`正在使用模板 "${template.name}" 创建项目...`)
    previewVisible.value = false
  }).catch(() => {
    ElMessage.info('已取消使用模板')
  })
}

const handleTemplateAction = (command, template) => {
  switch (command) {
    case 'preview':
      previewTemplate(template)
      break
    case 'use':
      useTemplate(template)
      break
    case 'favorite':
      ElMessage.success('已添加到收藏')
      break
    case 'share':
      ElMessage.info('分享功能开发中...')
      break
  }
}

onMounted(() => {
  // 初始化数据
})
</script>

<style scoped lang="scss">
.template-list {
  padding: 24px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;
  
  .page-header {
    position: relative;
    text-align: center;
    margin-bottom: 40px;
    padding: 60px 40px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(102, 126, 234, 0.3);
    
    .header-content {
      position: relative;
      z-index: 2;
    }
    
    .header-text {
      h1 {
        font-size: 48px;
        font-weight: 800;
        margin: 0 0 16px 0;
        text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        background: linear-gradient(45deg, #fff, #e3f2fd);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: titleGlow 2s ease-in-out infinite alternate;
      }
      
      p {
        font-size: 20px;
        margin: 0;
        opacity: 0.9;
        font-weight: 300;
        letter-spacing: 0.5px;
      }
    }
    
    .floating-shapes {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
      
      .shape {
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        animation: float 6s ease-in-out infinite;
        
        &.shape-1 {
          width: 100px;
          height: 100px;
          top: 20%;
          left: 10%;
          animation-delay: 0s;
        }
        
        &.shape-2 {
          width: 60px;
          height: 60px;
          top: 60%;
          right: 15%;
          animation-delay: 2s;
        }
        
        &.shape-3 {
          width: 80px;
          height: 80px;
          bottom: 20%;
          left: 20%;
          animation-delay: 4s;
        }
      }
    }
  }

  .filter-section {
    background: white;
    padding: 40px;
    border-radius: 25px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 32px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    
    .filter-header {
      text-align: center;
      margin-bottom: 32px;
      
      h3 {
        font-size: 24px;
        font-weight: 700;
        color: #2c3e50;
        margin: 0 0 8px 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      
      p {
        color: #7f8c8d;
        margin: 0;
        font-size: 16px;
      }
    }
    
    .search-wrapper {
      .search-input {
        :deep(.el-input__wrapper) {
          border-radius: 15px;
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
          border: 2px solid transparent;
          transition: all 0.3s ease;
          
          &:hover, &.is-focus {
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.2);
            border-color: #667eea;
          }
        }
      }
    }
    
    .filter-select {
      :deep(.el-input__wrapper) {
        border-radius: 15px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        border: 2px solid transparent;
        transition: all 0.3s ease;
        
        &:hover, &.is-focus {
          box-shadow: 0 6px 20px rgba(102, 126, 234, 0.2);
          border-color: #667eea;
        }
      }
    }
    
    .create-btn {
      border-radius: 15px;
      box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border: none;
      font-weight: 600;
      letter-spacing: 0.5px;
      transition: all 0.3s ease;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);
      }
    }
  }

  .stats-section {
    .stats-header {
      text-align: center;
      margin-bottom: 24px;
      
      h3 {
        font-size: 24px;
        font-weight: 700;
        color: #2c3e50;
        margin: 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
    
    .stats-card {
      border-radius: 20px;
      border: none;
      transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
      position: relative;
      overflow: hidden;
      
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        transition: opacity 0.3s ease;
      }
      
      &:hover {
        transform: translateY(-8px) scale(1.02);
        &::before {
          opacity: 1;
        }
      }
      
      &.stats-primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
      }
      
      &.stats-success {
        background: linear-gradient(135deg, #10b981 0%, #059f4f 100%);
        color: white;
        box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);
      }
      
      &.stats-warning {
        background: linear-gradient(135deg, #f59e0b 0%, #eab308 100%);
        color: white;
        box-shadow: 0 10px 30px rgba(245, 158, 11, 0.3);
      }
      
      &.stats-info {
        background: linear-gradient(135deg, #3794f3 0%, #1d4ed8 100%);
        color: white;
        box-shadow: 0 10px 30px rgba(55, 148, 243, 0.3);
      }
      
      :deep(.el-card__body) {
        padding: 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      
      .stats-content {
        .stats-number {
          font-size: 42px;
          font-weight: 800;
          line-height: 1;
          margin-bottom: 8px;
        }
        
        .stats-label {
          font-size: 16px;
          font-weight: 500;
          opacity: 0.9;
        }
      }
      
      .stats-icon {
        font-size: 48px;
        opacity: 0.8;
      }
    }
  }

  .templates-section {
    .templates-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 32px;
      
      h3 {
        font-size: 24px;
        font-weight: 700;
        color: #2c3e50;
        margin: 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      
      .view-options {
        .el-button-group {
          .el-button {
            border-radius: 10px;
            
            &:first-child {
              border-top-right-radius: 0;
              border-bottom-right-radius: 0;
            }
            
            &:last-child {
              border-top-left-radius: 0;
              border-bottom-left-radius: 0;
            }
          }
        }
      }
    }
  }

  .templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 32px;
    margin-bottom: 40px;
    
    &.list-view {
      grid-template-columns: 1fr;
      
      .template-card {
        display: flex;
        
        .template-image {
          width: 300px;
          flex-shrink: 0;
        }
        
        .template-content {
          flex: 1;
          padding: 32px;
        }
      }
    }
    
    .template-card {
      background: white;
      border-radius: 25px;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
      border: 1px solid rgba(255, 255, 255, 0.8);
      position: relative;
      
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
        opacity: 0;
        transition: opacity 0.3s ease;
      }
      
      &:hover {
        transform: translateY(-12px) scale(1.02);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        
        &::before {
          opacity: 1;
        }
        
        .template-overlay {
          opacity: 1;
        }
        
        .template-image img {
          transform: scale(1.1);
        }
        
        .template-badge {
          transform: scale(1.1);
        }
      }
      
      .template-image {
        position: relative;
        height: 240px;
        overflow: hidden;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
          opacity: 1;
        }
        
        .template-overlay {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(102, 126, 234, 0.8));
          display: flex;
          align-items: center;
          justify-content: center;
          opacity: 0;
          transition: all 0.3s ease;
          backdrop-filter: blur(5px);
          
          .overlay-actions {
            display: flex;
            gap: 16px;
            
            .action-btn {
              border-radius: 12px;
              font-weight: 600;
              backdrop-filter: blur(10px);
              transition: all 0.3s ease;
              
              &:hover {
                transform: translateY(-2px);
              }
            }
          }
        }
        
        .template-badge {
          position: absolute;
          top: 16px;
          right: 16px;
          z-index: 3;
          transition: transform 0.3s ease;
          
          .badge {
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            backdrop-filter: blur(10px);
            
            &.hot {
              background: rgba(239, 68, 68, 0.9);
              color: white;
            }
            
            &.popular {
              background: rgba(245, 158, 11, 0.9);
              color: white;
            }
            
            &.new {
              background: rgba(16, 185, 129, 0.9);
              color: white;
            }
          }
        }
      }
      
      .template-content {
        padding: 28px;
        position: relative;
        z-index: 2;
        
        .template-header {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          margin-bottom: 16px;
          
          h3 {
            font-size: 20px;
            font-weight: 700;
            color: #1a202c;
            margin: 0;
            flex: 1;
            margin-right: 12px;
            background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
          
          .category-tag {
            border-radius: 20px;
            font-size: 11px;
            font-weight: 600;
            padding: 6px 14px;
          }
        }
        
        .template-description {
          font-size: 14px;
          color: #64748b;
          line-height: 1.7;
          margin-bottom: 20px;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        
        .template-meta {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
          margin-bottom: 24px;
          align-items: center;
          
          .meta-tag {
            border-radius: 16px;
            font-size: 11px;
            font-weight: 500;
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            color: #475569;
            border: 1px solid #e2e8f0;
            transition: all 0.3s ease;
            
            &:hover {
              transform: scale(1.05);
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            }
          }
          
          .template-stats {
            margin-left: auto;
            
            .downloads {
              display: flex;
              align-items: center;
              gap: 6px;
              font-size: 12px;
              color: #64748b;
              font-weight: 600;
              background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
              padding: 6px 12px;
              border-radius: 16px;
              border: 1px solid #e2e8f0;
            }
          }
        }
        
        .template-actions {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-top: 20px;
          border-top: 1px solid #f1f5f9;
          
          .rating-section {
            :deep(.el-rate) {
              .el-rate__item {
                margin-right: 2px;
              }
              
              .el-rate__text {
                font-size: 12px;
                color: #64748b;
                font-weight: 500;
              }
            }
          }
          
          .more-actions {
            .more-btn {
              color: #64748b;
              font-weight: 500;
              padding: 8px 16px;
              border-radius: 12px;
              transition: all 0.3s ease;
              
              &:hover {
                background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
                color: #3b82f6;
                transform: scale(1.05);
              }
            }
          }
        }
      }
    }
  }

  .pagination-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    
    :deep(.el-pagination) {
      .el-pager li {
        border-radius: 8px;
        margin: 0 4px;
        transition: all 0.3s ease;
        
        &:hover, &.is-active {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          color: white;
          transform: scale(1.1);
        }
      }
      
      .btn-prev, .btn-next {
        border-radius: 8px;
        margin: 0 4px;
        
        &:hover {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          color: white;
        }
      }
    }
  }

  .preview-dialog {
    :deep(.el-dialog) {
      border-radius: 20px;
      overflow: hidden;
    }
    
    :deep(.el-dialog__header) {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 24px;
      
      .el-dialog__title {
        font-size: 24px;
        font-weight: 700;
      }
    }
    
    .template-preview-content {
      display: flex;
      gap: 32px;
      padding: 24px;
      
      .preview-image {
        width: 50%;
        
        img {
          width: 100%;
          border-radius: 16px;
          box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }
      }
      
      .preview-info {
        flex: 1;
        
        .preview-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 20px;
          
          h3 {
            font-size: 28px;
            font-weight: 700;
            color: #2c3e50;
            margin: 0;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }
        
        .preview-description {
          font-size: 16px;
          color: #64748b;
          line-height: 1.7;
          margin-bottom: 24px;
        }
        
        .preview-meta {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 16px;
          margin-bottom: 32px;
          
          .meta-item {
            display: flex;
            align-items: center;
            
            .label {
              font-weight: 600;
              color: #374151;
              margin-right: 8px;
            }
            
            .value {
              color: #6b7280;
              font-weight: 500;
            }
          }
        }
        
        .preview-features {
          h4 {
            font-size: 18px;
            font-weight: 700;
            color: #2c3e50;
            margin: 0 0 16px 0;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
          
          ul {
            list-style: none;
            padding: 0;
            margin: 0;
            
            li {
              display: flex;
              align-items: center;
              padding: 8px 0;
              color: #4b5563;
              font-weight: 500;
              
              .el-icon {
                color: #10b981;
                margin-right: 12px;
                font-size: 16px;
              }
            }
          }
        }
      }
    }
    
    .dialog-footer {
      padding: 24px;
      display: flex;
      justify-content: flex-end;
      gap: 16px;
      background: #f9fafb;
      
      .el-button {
        border-radius: 12px;
        font-weight: 600;
        padding: 12px 24px;
      }
    }
  }

  .mb-4 {
    margin-bottom: 24px;
  }
}

@keyframes titleGlow {
  0% { text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
  100% { text-shadow: 0 4px 15px rgba(255, 255, 255, 0.3), 0 0 30px rgba(255, 255, 255, 0.2); }
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-30px) rotate(120deg); }
  66% { transform: translateY(-15px) rotate(240deg); }
}

// 响应式设计
@media (max-width: 1200px) {
  .templates-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
}

@media (max-width: 768px) {
  .template-list {
    padding: 16px;
  }
  
  .templates-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    
    &.list-view .template-card {
      flex-direction: column;
      
      .template-image {
        width: 100%;
      }
    }
  }
  
  .page-header {
    padding: 40px 20px;
    
    .header-text h1 {
      font-size: 36px;
    }
    
    .header-text p {
      font-size: 18px;
    }
  }
  
  .filter-section {
    padding: 24px;
    
    .el-row {
      flex-direction: column;
      
      .el-col {
        width: 100%;
        margin-bottom: 16px;
        
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
  
  .template-preview-content {
    flex-direction: column;
    
    .preview-image {
      width: 100%;
    }
    
    .preview-meta {
      grid-template-columns: 1fr;
    }
  }
}
</style>
